<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1400px;
            margin: 0 auto;
            float: left;
        }
        .box ul li{
            float: left;
            width: 224px;
            height: 300px;
            margin: 0 auto;
            margin-left: 20px;
            margin-bottom: 20px;
            background-color: pink;
            transition: all .2s linear;
        }
        .box ul li:hover{
            transform: translateY(-10px);
            box-shadow: 5px 5px 10px #b0b0b0;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        .clearfix:after {
             visibility: hidden;
             clear: both;
             display: block;
             content: ".";
             height: 0
        }
        .clearfix {
             *zoom: 1
        }
        .container{
            width: 1200px;
            height: 0 auto;
        }
        .header{
            height: 40px;
            line-height: 40px;
            background-color: #333;
        }
        .header ul li{
            float: left;
            height: 40px;
        }
        .header ul li a{
            padding: 0 10px;
            color: #b0b0b0;
            font-size: 12px;
        }
        .header ul li a:hover{
            color: #fff;
        }
        .header-left{
            float: left;
        }
        .header-right{
            float: right;
        }
        .nav{
            height: 100px;
        }
        .nav-logo{
             float: left;
             margin-top: 22px;
             width: 55px;
             height: 55px;
        }
        .nav-logo a{
            display: block;
            width: 55px;
            height: 55px;
            background: #ff6700 url(mi-logo.png)no-repeat center center;
            -webkit-transition: all .4s linear;
               -moz-transition: all .4s linear;
                 -o-transition: all .4s linear;
                    transition: all .4s linear4
        }
        .nav-logo a:hover{
            background-image: url(mi-home.png);
        }
        .nav-main{
            float: left;
            margin-left: 50px;
            height: 100px;
            line-height: 100px;
        }
        .nav-main li{
            float: left;
        }
        .nav-main li a{
            display: block;
            padding: 0 14px;
            font-size: 16px;
            color: #333;
        }
        .nav-main li a:hover{
            color: #ff6700;
        }
        .nav-search{
            float: right;
            margin-top: 25px;
        }
        .search-text{
            float: left;
            width: 233px;
            height: 48px;
            border: 1px solid #e0e0e0;
            border-right: none;
            padding: 0 10px;
        }
        .search-button{
            float: left;
            width: 50px;
            height: 50px;
            border: 1px solid #e0e0e0;
            background: #fff url(search.png) no-repeat center center;
            background-size: 50% 50%;
        }
        .search-button:hover{
            background: #ff6700 url(search-active.png) no-repeat center center;
            background-size: 50% 50%;
            cursor: pointer;
        }
        .banner{
            height: 460px;
        }
        .banner-left{
            float: left;
            width: 240px;
            height: 460px;
            background-color: pink;
        }
        .banner-right{
            float: right;
            width: 960px;
            height: 460px;
            background-color: skyblue;
        }
        .banner-right img{
            width: 100%;
            height: 100%;
        }
        .box-hd{
            height: 58px;
        }
        .box-hd .title{
            float: left;
            font-size: 22px;
            font-weight: 200;
            line-height: 58px;
        }
        .box-hd .more{
            float: right;
            line-height: 58px;
        }
        .box-hd .more a:hover{
            color: #ff6700;
        }
        .box-hd{
            width: 1200px;
        }
        .box-hd .item{
            float: left;
            margin: 0 20px 20px 0;
            width: 224px;
            height: 300px;
            background-color: pink;
            -webkit-transition: all .2s linear;
               -moz-transition: all .2s linear;
                 -o-transition: all .2s linear;
                    transition: all .2s linear;
        }
        .box-hd .item:hover{
            box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
            -webkit-transform: translate3d(0, -8px, 0);
               -moz-transform: translate3d(0, -8px, 0);
                 -o-transform: translate3d(0, -8px, 0);
                    transform: translate3d(0, -8px, 0);
        }
        .banner-box{
            width: 1200px;
            height: 22px auto;
        }
        .banner-box img{
            width: 100%;
        }
        .footer{
            padding: 40px 0;
        }
        .footer-left{
            float: left;
        }
        .footer-left .link{
            float: left;
            width: 160px;
        }
        .link dt{
            padding-bottom: 20px;
            font-size: 14px;
            color: #424242;
        }
        .link dd a{
            font-size: 12px;
            line-height: 24px;
            color: #757575;
        }
        .link dd a:hover{
            color: #ff6700;
        }
        .footer-right{
            float: right;
            width: 240px;
            text-align: center;
            color: #616161;
        }
        .footer-right .phone{
            margin-bottom: 6px;
            font-size: 22px;
            color: #ff6700;
        }
        .footer-right .time{
            margin-bottom: 6px;
            font-size: 12px;
        }
        .footer-right .footer-button{
            display: inline-block;
            width: 118px;
            height: 28px;
            line-height: 28px;
            border: 1px solid #ff6700;
            background: #fff;
            color: #ff6700;
            font-size: 12px;
        }
        .footer-right .footer-button:hover{
            background: #ff6700;
            color: #fff;
        }
        .footer-right .bottom{
            margin-top: 10px;
            font-size: 12px;
        }
        .footer-right .bottom a{
            display: inline-block;
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-left: 6px;
            margin-top: -3px;
        }
        .footer-right .bottom .wb{
            background: url(wb.png) no-repeat center center;
            background-size: 100% 100%;
        }
        .footer-right .bottom .wx{
            background: url(wx.png) no-repeat center center;
            background-size: 100% 100%;
        }
        .tool{
            position: fixed;
            top: 200px;
            right: 20px;
            background-color: #fff;
        }
        .tool a{
            display: block;
            border: 1px solid #f5f5f5;
            font-size: 12px;
            color: #333;
            padding: 10px 20px;
        }
        .tool a:hover{
            color: #ff6700;
        }
    </style>
</head>
<body>
   <div class="header" id="top">
      <div class="container">
          <ul class="header-left">
              <li><a helf="#">小米商城</a></li>
              <li><a helf="#">MIUI</a></li>
              <li><a helf="#">IoT</a></li>
              <li><a helf="#">云服务</a></li>
              <li><a helf="#">天性数科</a></li>
              <li><a helf="#">有品</a></li>
              <li><a helf="#">小爱开放平台</a></li>
              <li><a helf="#">企业团购</a></li>
              <li><a helf="#">资质证照</a></li>
              <li><a helf="#">协议规则</a></li>
              <li><a helf="#">下载app</a></li>
              <li><a helf="#">智能生活</a></li>
              <li><a helf="#">Sclect location</a></li>
          </ul>
          <ul class="header-right">
              <li><a helf="#">登录</a></li>
              <li><a helf="#">注册</a></li>
              <li><a helf="#">消息通知</a></li>
          </ul>
      </div>
   </div>
   <div class="nav">
       <div class="container">
         <div class="nav-logo">
           <a href="#"></a>
         </div>
         <ul class="nav-main">
             <li><a href="#">小米手机</a></li>
             <li><a href="#">Redmi 红米</a></li>
             <li><a href="#">电视</a></li>
             <li><a href="#">笔记本</a></li>
             <li><a href="#">家电</a></li>
             <li><a href="#">路由器</a></li>
             <li><a href="#">智能硬盘</a></li>
             <li><a href="#">服务</a></li>
             <li><a href="#">社区</a></li>
         </ul>
         <div class="nav-search">
            <input type="text" class="search-text" placeholder="家电">
            <input type="button" class="search-button">
         </div>
       </div>
   </div> 
   <div class="banner container">
       <div class="banner-left"></div>
       <div class="banner-right">
           <img src="banner.jpg" alt="">
       </div>
   </div>
   <div class="box container">
       <div class="box-hd">
           <h2 class="title"><a name="phone">手机</a></h2>
            <div class="more">
                <a href="#">查看全部</a>
            </div>
       </div>
       <div class="box-bd clearfix">
           <ul>
              <li class="item"></li>
              <li class="item"></li>
              <li class="item"></li>
              <li class="item"></li>
              <li class="item"></li>
              <li class="item"></li>
              <li class="item"></li>
              <li class="item"></li>
              <li class="item"></li>
              <li class="item"></li>
           </ul>
       </div>
   </div>
   <div class="banner-box">
       <img src="banner1 .jpg" alt="">
   </div>
   <div class="box container">
       <div class="box-hd">
           <h2 class="title"><a name="jiadian">家电</a></h2>
           <div class="more">
               <a href="#">查看全部</a>
           </div>
       </div>
       <div class="box-bd clearfix">
        <ul>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
         </ul>
       </div>
   </div>
   <div class="banner-box">
       <img src="banner2.jpg" alt="">
   </div>
   <div class="container footer clearfix">
       <div class="footer-left">
           <dl class="link">
           <dt>帮助中心</dt>
           <dd><a href="#">账户管理</a></dd>
           <dd><a href="#">购物指南</a></dd>
           <dd><a href="#">订单操作</a></dd>
       </dl>
       <dl class="link">
        <dt>服务中心</dt>
        <dd><a href="#">售后政策</a></dd>
        <dd><a href="#">自助服务</a></dd>
        <dd><a href="#">相关下载</a></dd>
      </dl>
      <dl class="link">
          <dt></dt>
        <dd><a href="#">小米之家</a></dd>
        <dd><a href="#">服务网点</a></dd>
        <dd><a href="#">授权体验店</a></dd>
    </dl>
    <dl class="link">
        <dt></dt>
        <dd><a href="#">了解小米</a></dd>
        <dd><a href="#">加入小米</a></dd>
        <dd><a href="#">投资者关系</a></dd>
        <dd><a href="#">企业社会责任</a></dd>
        <dd><a href="#">廉洁举报</a></dd>
    </dl>
    <dl class="link">
        <dt></dt>
        <dd><a href="#">新浪微博</a></dd>
        <dd><a href="#">官方微信</a></dd>
        <dd><a href="#">联系我们</a></dd>
        <dd><a href="#">公益基金会</a></dd>
    </dl>
    <dl class="link">
        <dt></dt>
        <dd><a href="#">F码通道</a></dd>
        <dd><a href="#">礼物码</a></dd>
        <dd><a href="#">防伪查询</a></dd>
    </dl>
 </div>
 <div class="footer-right">
     <p class="phone">400-100-5678</p>
     <p class="time">8:00-18:00(仅收市话费）</p>
    <a href="#" class="footer-button">人工客服</a>
    <div class="bottom">
         关注小米：
         <a href="#" class="wb"></a>
         <a href="#" class="wx"></a>
    </div>
  </div>
</div>
<div class="tool">
    <a href="#phone">1F手机</a>
    <a href="#jiadian">2F家电</a>
    <a href="#tor">回到顶部</a>
</div>
</body>
</html>